<script setup>
import {ref,computed} from 'vue'
import { addSinger,updateSinger,getSingerDetail} from '@/api/singer'

const drawer = ref(false)
const formLabelWidth = '80px'
// 表单数据
const form = ref({
  name: '',
  sex: "1",
  pic: '',
  birth: '',
  location: '',
  introduction: '',
})

// 添加表单验证规则
const rules = ref({
  name: [
    { required: true, message: '请输入歌手名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
  ]
})

const mode = ref('add')  // 模式，默认为添加
// 
// 根据 mode 计算 title
const title = computed(() => {
  return mode.value === 'add' ? '添加歌手' : '编辑信息'
})

// 添加表单引用
const formRef = ref(null)

// // // 定一个供父组件调用的打开抽屉的方法
const openDrawer = async (singerId) => {
  if (singerId) {
    mode.value = 'edit'
    // 异步请求获取数据
    const { data } = await getSingerDetail(singerId)
    console.log(data);  
    form.value = data
    form.value.sex = "" + form.value.sex

  } else {
    mode.value = 'add'
    form.value = {
       name: '',
       sex: "1",
       pic: '',
       birth: '',
       location: '',
       introduction: '',
    }
  }
  drawer.value = true
  // 异步请求

}
//  暴露方法
defineExpose({
  openDrawer
})
const upload = (url) => {  
  form.value.pic = url
}
const onSubmit =async () => {    
  // 先进行表单验证
  try {
    await formRef.value.validate()
  } catch (error) {
    console.log('表单验证失败', error)
    return
  }

  let res
  if (mode.value === 'add') {
    res = await addSinger(form.value)
  } else if (mode.value === 'edit') {
    res = await updateSinger(form.value)  
  } else {
    ElMessage.error('未知操作模式')
    return
  }
  console.log(res);  
  ElMessage.success(res.msg)
  drawer.value = false
  emit("singer-list")  // 通知父组件刷新歌手列表
}
const emit = defineEmits(['singer-list'])
</script>

<template>
  <el-drawer v-model="drawer" :title="title" direction="rtl" size="40%">
    <div class="demo-drawer__content">
      <!-- 添加 ref 和 rules -->
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name" required>
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.sex">
            <el-radio value="1" size="large">男</el-radio>
            <el-radio value="0" size="large">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker v-model="form.birth" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="国籍" :label-width="formLabelWidth">
          <el-input v-model="form.location" autocomplete="off" />
        </el-form-item>
        <el-form-item label="简介" :label-width="formLabelWidth">
          <el-input v-model="form.introduction" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图像" :label-width="formLabelWidth">
          <image-upload @upload-success="upload" :imgUrl="form.pic"></image-upload>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
          <el-button type="primary" @click="onSubmit">完成</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<style scoped>

</style>
